<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/font/iconfont.css">
    <link rel="stylesheet" href="./css/userCard.css">
    <link rel="stylesheet" href="../assets/notice/notice.css">
    <script src="../assets/notice/notice.js"></script>
    <script src="../assets/axios/axios.js"></script>
    <script src="./utils/request.js"></script>
    <script>
        // rest 参数：将参数以地址方式隐藏域请求地址中，作为服务器解析使用的一种特殊参数
        // rest 参数多被用于 resfull 服务器接口规范中
        // 后端的接口开发规范 ResfullApi 接口规范 => 减少接口地址的数量
        //         通过 http 请求类型 区分相同地址的不同功能

        // 例如：服务器提供接口 http://127.0.0.1:3000/api/users 描述和用户有关的相关操作（查询、删除、修改、添加……）
        //      HTTP get ==> 服务器会设置为查询方法
        //                  ==> 查询单个用户
        //                  ==> 查询列表用户
        //      HTTP post ==> 服务器会设置为添加方法
        //      HTTP delete ==> 服务器会设置为删除方法
        //      HTTP put|pacth ==> 服务器会设置为更新方法

        // 在实际开发中，如果公司提供接口规范文档的化，一般会出现如下书写规则
        /*
            标题:（用户查询）
            URL: /user/:id   => id 为路径参数 
                 /user/{id}  => id 为路径参数 
        */

        function removeStu(){
            // axios.delete("http://127.0.0.1:3000/api/stu/213123123123123")
            axios.delete("http://127.0.0.1:3000/api/stu/asdasdasdasd")
            // axios.delete("http://127.0.0.1:3000/api/stu")
                .then(function(data){
                    notice({
                        icon:"success",
                        title:data.msg
                    })
                })
        }
        function loadAllUsers(){
            axios.get("http://127.0.0.1:3000/api/stu")
                .then(function(data){
                    console.log(data)
                    notice({
                        icon:"success",
                        title:data.msg
                    })
                })
        }
        function loadUserById(){
            axios.get("http://127.0.0.1:3000/api/stu/100001")
                .then(function(data){
                    console.log(data)
                    notice({
                        icon:"success",
                        title:data.msg
                    })
                })
        }
    </script>
</head>

<body>
    <input type="button" value="删除学生信息" onclick="removeStu()">
    <br>
    <input type="button" value="查询所有学生信息" onclick="loadAllUsers()">
    <br>
    <input type="button" value="查询单个学生信息" onclick="loadUserById()">
</body>

</html>